
<!-- Breadcrumb  -->
<section class="breadcrumb-section">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-xs-12 text-center">
        <div class="breadcrumb-content">
          <h2>Our Activity</h2>
          <ul>
            <li><a routerLink="index">Home</a><span>/</span></li>
            <li>Activity</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- /.breadcrumb-section  -->

<!-- Classes Section -->
<section class="classes-section-3">
  <div class="container">
    <!--<div class="row">
      <div class="col-sm-12 col-xs-12">
        <div class="class-sort-btn-section">
          <ul class="sort-btn pull-left">
            <li><a routerLink="class#kinder">Kindergarten</a></li>
            <li><a routerLink="class#play">Play Group</a></li>
            <li><a routerLink="class#primary">Pre- Primary</a></li>
            <li><a routerLink="class#story">Story</a></li>
          </ul>
          <form method="post" action="#" class="class-search pull-right">
            <input type="search" name="search" placeholder="Search classes">
            <button type="submit"><i class="fa fa-search"></i></button>
          </form>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>-->
    <div class="row" *ngIf="activity">
      <div class="col-sm-6 col-xs-12">
        <div class="class-detail-img">
          <img alt="" src="images/class1/class-details.jpg">
        </div>
      </div>
      <div class="col-sm-6 col-xs-12">
        <div class="class-information">
          <h3>{{activity.title}}</h3>
          <h5>{{activity.theme}}</h5>
          <p>
            活动内容：{{activity.content}}
          </p>
          <p>
            活动地址：{{activity.activitiesAddress}}
          </p>
        </div>
        <div class="class-meta-data">
          <div class="class-single-meta pull-left">
            <p>开始时间</p>
            <h5>{{activity.startTime | date:"yy/MM/dd"}}</h5>
          </div>
          <div class="class-single-meta pull-left">
            <p>结束时间</p>
            <h5>{{activity.endTime | date:"yy/MM/dd"}}</h5>
          </div>
          <div class="class-single-meta pull-left">
            <p>截止时间</p>
            <h5>{{activity.deadline | date:"yy/MM/dd"}}</h5>
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="class-meta-data">
          <div class="class-single-meta pull-left">
            <p>阅读人数</p>
            <h4>{{activity.readNumber ? activity.readNumber : 0 }}</h4>
          </div>
          <div class="class-single-meta pull-left">
            <p>评价</p>
            <ngb-rating [(rate)]="currentRate" (rateChange)="rateChange()" [readonly]="readonly">
              <template let-fill="fill">
                <span class="star" [class.filled]="fill === 100">&#9733;</span>
              </template>
            </ngb-rating>
          </div>
          <div class="class-single-meta pull-left">
            <p>报名人数</p>
            <h4>{{activity.willNumber ? activity.willNumber : 0 }}</h4>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- /.classes-section-2 -->

<!-- Subject and teacher Section -->
<section class="subject-and-teacher-details">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-xs-12">
        <div class="subject-details">
          <div *ngIf="users" class="sub-heading"><h4>报名记录<span>( {{users.length}} 人 )</span></h4><p>个性签名</p></div>
          <ul class="subject-list" *ngFor="let user of users">
            <li>
              <a routerLink="#">{{user.nickName}}</a>
              <span>{{user.individualitySignature}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- /.subject-and-teacher-details -->
<!-- Call to Action -->
<section class="callto-action-section">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-xs-12">
        <div class="callto-content">
          <h2>Enrollment is now going on, please contact us.</h2>
          <a (click)="campaign()" class="primary-btn pull-right"><span>现在参加！</span></a>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- /.callto-action-section -->
<!-- Related Course Section -->
<section class="related-course-section">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-xs-12 text-center">
        <h2 class="title">精选活动</h2>
        <p class="subtitle">Starting with the new school year in our kindergarten</p>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4 col-xs-12">
        <div class="single-class">
          <div class="class-img">
            <img alt="" src="images/home1/class1.jpg">
            <div class="class-hover">
              <a routerLink="images/home1/class1.jpg" class="popup"><i class="icon-link"></i></a>
            </div>
          </div>
          <div class="class-details">
            <h3><a routerLink="class">Happy Kiddo</a></h3>
            <p>Admission Close</p>
            <div class="clearfix">
              <div class="class-meta pull-left">
                <span>Years Old</span>
                <p>2-3</p>
              </div>
              <div class="class-meta pull-left">
                <span>Class Size</span>
                <p>24</p>
              </div>
              <div class="class-meta pull-left">
                <span>Tution Fee</span>
                <p>$129</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-4 col-xs-12">
        <div class="single-class">
          <div class="class-img">
            <img alt="" src="images/home1/class2.jpg">
            <div class="class-hover">
              <a routerLink="images/home1/class2.jpg" class="popup"><i class="icon-link"></i></a>
            </div>
          </div>
          <div class="class-details">
            <h3><a routerLink="class">Junior Lambs</a></h3>
            <p>Admission Open</p>
            <div class="clearfix">
              <div class="class-meta pull-left">
                <span>Years Old</span>
                <p>3-5</p>
              </div>
              <div class="class-meta pull-left">
                <span>Class Size</span>
                <p>20</p>
              </div>
              <div class="class-meta pull-left">
                <span>Tution Fee</span>
                <p>$140</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-4 col-xs-12">
        <div class="single-class">
          <div class="class-img">
            <img alt="" src="images/home1/class3.jpg">
            <div class="class-hover">
              <a routerLink="images/home1/class3.jpg" class="popup"><i class="icon-link"></i></a>
            </div>
          </div>
          <div class="class-details">
            <h3><a routerLink="class">Master Mind</a></h3>
            <p>Admission Close</p>
            <div class="clearfix">
              <div class="class-meta pull-left">
                <span>Years Old</span>
                <p>4-6</p>
              </div>
              <div class="class-meta pull-left">
                <span>Class Size</span>
                <p>15</p>
              </div>
              <div class="class-meta pull-left">
                <span>Tution Fee</span>
                <p>$150</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
